import {Modal, Button, Form, Input, InputNumber, Select, Radio, message} from 'antd';
import type { RadioChangeEvent } from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import '../../assets/css/UserInfoImg.css'
import {getAdtypeList,getAdvertisementAdd} from "../../apis/advertisement";
import UserInfoImages from '../userInfo/UserInfoImages'
const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 12 },
};
const AdvertisementAdd:React.FC<any>=(props:any)=> {

    const handleCancel = () => {
        props.getUserClose()
    };
    const onFinish = async(values: any) => {
        console.log(values);
        const res:any = await getAdvertisementAdd({...values,id:props.listData.id,picture:modalImg}).catch()
        console.log(res)
        if(res&&res.errCode===10000){
            message.success('提交成功')
            props.getUserClose()
        }
    };
    const [params,setParams] = useState({
        page:1,
        psize:10,
        typeid:0
    })
    const [selectList,getSelectList] = useState([])
    const getTypeList = async ()=>{
        const res:any = await getAdtypeList(params).catch()
        if(res&&res.errCode===10000){
            getSelectList(res.data.list)
        }
    }
    //修改
    const listEdit = useRef<any>()
    //图片
    const [modalImg, setModalImg] = useState('');
    const obtainImg = (val:any)=>{
        setModalImg(val)
    }
    useEffect(()=>{
        if(props.listData.id){
            setModalImg(props.listData.picture)
        }
        listEdit.current.setFieldsValue(props.listData)
    },[])
    useEffect(()=>{
        getTypeList()
    },[])
    return (
        <>
            <Modal
                title="添加图片"
                width="40%"
                className="userinfoAdd"
                open={props.addShow}
                onCancel={handleCancel}
            >
                <Form {...layout} ref={listEdit} name="nest-messages" onFinish={onFinish} initialValues={{enabled:1}}>
                    <Form.Item name="title" label="标题" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="typeid" label="位置" rules={[{ required: true,message:'请选择位置' }]}>
                        <Select
                            style={{width:'200px'}}
                            placeholder="请选择"
                            allowClear
                            optionFilterProp="children"
                            fieldNames={{label: 'name',value:'id'}}
                            options={selectList}
                        />
                    </Form.Item>
                    <Form.Item name="url" label="URL">
                        <Input />
                    </Form.Item>
                    <Form.Item name="picture" label="图片" >
                        <UserInfoImages urlpass={props.listData.picture?props.listData.picture:''} obtainImg={obtainImg}/>
                    </Form.Item>
                    <Form.Item name="sort" label="排序">
                        <Input type="number" />
                    </Form.Item>
                    <Form.Item name="enabled" label="是否显示" rules={[{ required: true }]}>
                        <Radio.Group >
                            <Radio value={1}>显示</Radio>
                            <Radio value={0}>不显示</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item wrapperCol={{...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit">提交</Button>
                        <Button onClick={handleCancel} style={{marginLeft:10}}>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default AdvertisementAdd;
